<!--
  竞彩足球投注页
-->
<template>
  <div class="fixed-header fixed-footer">
    <x-header>
      <span class="rule-select" @click="toggle('popup')">{{rules[rule].name}}
        <i class="iconfont icon-caret-down font-xs"></i>
      </span>
      <a slot="right" @click="toggle('popover')"><i class="iconfont icon-menu"></i></a>
    </x-header>

    <popover v-model="popover" placement="bottom right" position="fixed" :z-index="502">
      <router-link class="px-3 py-2 clickable" tag="div" to='/winlose/prizes'>
        <i class="iconfont align-middle icon-clock font-xxxl"></i> 最近开奖
      </router-link>
      <div class="px-3 py-2 clickable" @click="faq(rule, () => popover = false)">
        <i class="iconfont icon-info font-xxxl"></i> 玩法说明
      </div>
    </popover>
    <masker v-model="popover" position="fixed" :z-index="501"/>

    <popup class="py-2" v-model="popup" position="top">
      <div class="text-center">选择期号</div>
      <div class="d-flex flex-wrap px-2">
        <div class="rule box-xl" :class="{on: current.lotteryNo == r.lotteryNo}" @click="current = r" :key="r.lotteryNo" v-for="r in results">
          <a>{{r.lotteryNo}}期</a>
        </div>
      </div>
    </popup>

    <div>
      <div class="flex-middle fixed l-0 r-0 bg-grey px-3 py-1 bb-l">
        <b>{{current.lotteryNo}}期</b>
        <b class="text-grey ml-auto"><i class="iconfont icon-clock"></i> 截止: {{current.endTime}}</b>
      </div>
      <div class="py-1">&nbsp;</div>
    </div>

    <div class="bb-l" v-for="(m, i) in current.matches">

      <div class="flex-middle text-center bg-white p-3">

        <div class="flex-column text-grey flex-shrink-0 font-sm mr-3" style="width: 4.6rem" @click="m.expand = !m.expand">
          <b class="text-truncate mt-auto">{{m.matchNo + ' ' + m.league}}</b>
          <small>{{m.date}}</small>
          <small>{{m.time}}开赛</small>
          <i class="iconfont animate font-sm" :class="m.expand ? 'icon-arrow-up' : 'icon-arrow-down'"></i>
        </div>

        <!--
        <div class="d-flex flex-grow">
          <div class="box-xl" @click="select(i, 3)">
            <b class="text-truncate" :class="{'text-red': m.hostHot}"><small>{{m.hostRank}}</small>{{m.hostShort}}</b>
            <div class="g py-1 mt-1 bl-l bt-l" :class="{on: on(i, 3)}">
              <strong>3</strong>
              <small>{{m.hostOdds}}</small>
            </div>
          </div>
          <div class="grow" @click="select(i, 1)">
            <small class="text-grey">VS</small>
            <div class="g py-1 mt-1 bt-l" :class="{on: on(i, 1)}">
              <strong>1</strong>
              <small>{{m.evenOdds}}</small>
            </div>
          </div>
          <div class="box-xl" @click="select(i, 0)">
            <b class="text-truncate" :class="{'text-red': m.guestHot}">{{m.guestShort}}<small>{{m.guestRank}}</small></b>
            <div class="g py-1 mt-1 bt-l" :class="{on: on(i, 0)}">
              <strong>0</strong>
              <small>{{m.guestOdds}}</small>
            </div>
          </div>
        </div>
        -->

        <div class="d-flex flex-grow bt-l bl-l">
          <div class="g box-xl ofx-hidden py-1" :class="{on: on(i, 3)}" @click="select(i, 3)">
            <div class="text-truncate" :class="{'text-red': m.hostHot}"><b class="font-xxs">{{m.hostRank}}</b>{{m.hostShort}}</div>
            <b class="text-grey">主胜{{m.hostOdds}}</b>
          </div>
          <div class="g grow py-1" :class="{on: on(i, 1)}" @click="select(i, 1)">
            <div>VS</div>
            <b class="text-grey">平{{m.evenOdds}}</b>
          </div>
          <div class="g box-xl ofx-hidden py-1" :class="{on: on(i, 0)}" @click="select(i, 0)">
            <div class="text-truncate" :class="{'text-red': m.guestHot}">{{m.guestShort}}<b class="font-xxs">{{m.guestRank}}</b></div>
            <b class="text-grey">客胜{{m.guestOdds}}</b>
          </div>
        </div>

      </div>

      <template v-if="m.expand">
        <div class="tips px-3 py-1 bb-l">
          <em>近期战绩</em>
          <em class="ml-4">主队 <b>{{m.hostHistory.win || ' - '}}胜</b> <i>{{m.hostHistory.even || ' - '}}平</i> <a>{{m.hostHistory.lose || ' - '}}负</a></em>
          <em class="ml-4">客队 <b>{{m.guestHistory.win || ' - '}}胜</b> <i>{{m.guestHistory.even || ' - '}}平</i> <a>{{m.guestHistory.lose || ' - '}}负</a></em>
        </div>
        <div class="tips px-3 py-1 bb-l">
          <em>历史交锋</em>
          <em class="ml-4">{{m.hostShort}} <b>{{m.versusHistory.win || ' - '}}胜</b> <i>{{m.versusHistory.even || ' - '}}平</i> <a>{{m.versusHistory.lose || ' - '}}负</a></em>
        </div>
        <div class="tips px-3 py-1 bb-l">
          <em>平均欧赔</em>
          <em class="ml-4" v-text="m.hostOdds"></em>
          <em class="ml-5" v-text="m.evenOdds"></em>
          <em class="ml-5" v-text="m.guestOdds"></em>
        </div>
        <router-link tag="div" :to="'/match?matchId=' + m.matchId" class="text-center clickable py-2">
          详细数据分析<i class="iconfont icon-arrow-right font-sm"></i></router-link>
      </template>

    </div>

    <footer class="bottom-action pr-3">
      <div class="px-3 br-l" @click="bets = []">
        <i class="iconfont icon-trash align-sub font-xxxl"></i>
      </div>
      <div class="ml-3 mr-auto">
        <div>共{{sum}}注 <b class="text-red">{{sum * 2}}元</b></div>
        <div class="text-grey font-sm" v-html="tips"></div>
      </div>
      <button class="btn btn-danger" :disabled="!sum" @click="$router.push('/winlose/cart?rule=' + rule)">确定</button>
    </footer>

  </div>
</template>

<script>
import { Popup } from 'vant'
import { mixin, nothing, rules } from './calculator'
import { get, set } from '../../utils/stoage'
import { faq } from '../../router'
import xHeader from '../widgets/header'
import Popover from '../widgets/popover'
import Masker from '../widgets/masker'
import http from '../../http'

function recent (str) {
  var o = {}
  if (str) {
    o = JSON.parse(str)
    o = o.recent
  }
  return o
}

function vursus (str) {
  var o = {}
  if (str) {
    o = JSON.parse(str)
    o = o.host || {}
  }
  return o
}

export default {
  components: {xHeader, Popup, Popover, Masker},
  name: 'winlose',
  mixins: [mixin],
  data: () => ({
    results: [],
    popover: false,
    popup: false,
    rules
  }),
  beforeRouteEnter (to, from, next) {
    var rule = to.query.rule || 'sfc'
    http.post('/winlose/matches', {rule}).then(res => {
      next(vm => {
        vm.results = res.results.map(r => {
          r.matches.map(m => {
            m.hostHistory = recent(m.hostHistory)
            m.guestHistory = recent(m.guestHistory)
            m.versusHistory = vursus(m.versusHistory)
            var split = m.matchTime.split(' ')
            m.date = split[0].substr(5)
            m.time = split[1].substr(0, 5)
            m.expand = false
          })
          return r
        })
        vm.current = vm.results.length ? vm.results[0] : {}
        vm.bets = get('winlose.bets', nothing())
        vm.rule = rule
        set('winlose.no', current.lotteryNo)
      })
    })
  },
  methods: {faq}
}
</script>
